<template>
	<view class="bigView">
		<view style="padding: 16px;overflow-y: auto">
			<!-- <rich-text :nodes="htmlValue"></rich-text> -->
			<!-- <u-parse :content="htmlValue" :lazyLoad="true"></u-parse> -->
			<u-parse :content="htmlValue"></u-parse>
			<!-- <mp-html :content="htmlValue" /> -->
			<view class="bottomView" v-if="type==1">
				<view></view>
				<view style="display: flex;flex-direction: row;padding-right: 10px;align-items: center;font-size: 14px;">
					<button open-type="share" class="shareBtn" style="border:none;color: black;" plain type="primary" v-if="Object.keys(userInfo).length>0">
					<!-- 分享 -->
						<u-icon name="share" size="20"></u-icon>
					</button>
					<view style="margin-right: 20px;" @click="shareHandle(item)" v-else>
						<u-icon name="share" size="20"></u-icon>
					</view>
					<view @click="giveThumbsHandle(item)">
						<u-icon name="heart" size="20"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view></view>
		<view v-if="remainingTime>0" style="right: 20rpx;bottom: 60rpx;display: flex;align-items: center;position: fixed;width: 100rpx;height: 100rpx;background-color: red;border-radius: 50rpx;justify-content: center;">
			{{remainingTime}}
		</view>
	</view>
</template>

<script>
	import noti from '@/api/noti.js'
	import news from '@/api/news.js'
	export default{
		components:{
			
		},
		data(){
			return {
				bottom:0,
				type:0,//
				currentId:'',
				result:{},
				htmlValue:'',
				timer: null,
				timestamp:15,
				remainingTime: 15, // 60 秒
				userInfo:{},
			}
		},
		mounted() {
			uni.getSystemInfo({success: (e) => {
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
			}})
			this.$nextTick(() =>{
				this.initUserInfo()
			})
		},
		onLoad(options) {
			if(options.id){
				this.type = options.type;
				this.currentId = options.id;
				this.queryByIdRequest()
			}
			if (this.type == 1) {
				setTimeout(() => {
					this.startCountdown();
				}, 1000)
			}
		},
		onShareAppMessage() {
			if(Object.keys(this.userInfo).length==0){
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return
			}
			return{
				title: this.result.theme,
				path: '/packageHome/pages/homeDetail/index?id='+this.currentId+"&type="+this.type,
				success(res) {
					console.log('分享成功', res);
					if(this.type == 1){// 嘉园风情
						news.forward({id:this.result.id}).then(res =>{
							uni.showToast({
								title:"分享成功"
							})
						}).catch(err =>{
							
						})
					}
				},
				fail(err) {
					console.error('分享失败', err);
					uni.showModal({
						title:err
					})
				}
			}
		},
		methods:{
			click(item) {
				this.newsListRequest(item.index+1)
			},
			scrolltolower() {
				// this.loadmore()
			},
			sureHandle(){
				uni.navigateBack()
			},
			queryByIdRequest(){
				if(this.type==0){//通知公告
					noti.queryByIdHandle({id: this.currentId}).then(res =>{
						this.result = res;
						this.htmlValue = this.result.content;
					}).catch(error =>{
					
					})
				}else if(this.type==1){//新闻动态
					news.queryByIdHandle({id: this.currentId}).then(res =>{
						this.result = res;
						this.htmlValue = this.result.content;
					}).catch(error =>{
					
					})
				}
				
			},
			initUserInfo(){
				const userInfo = uni.getStorageSync("userInfo")
				if(userInfo){
					this.userInfo = JSON.parse(userInfo)
				}				
			},
			backHandle(){
				if(this.timer != null){
					clearInterval(this.timer);
				}
			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
			},
			formattedTime() {
			  const seconds = this.remainingTime % 60;
			  return `${seconds < 10 ? '0' + seconds : seconds}`;
			},
			startCountdown() {
				if(Object.keys(this.userInfo).length==0){
					return
				}
			      this.timer = setInterval(() => {
			        if (this.remainingTime > 0) {
			          this.remainingTime--;
					  console.log("-------"+this.remainingTime)
			        } else {
			          clearInterval(this.timer);
			          this.remainingTime = 0;
					  this.browseRequest()
			        }
			      }, 1000)
			},
			browseRequest(){
				if(this.type == 1){// 新闻动态
					news.browse({id:this.result.id}).then(res =>{
						
					}).catch(err =>{
					
					})
				}
				
			},
			giveThumbsHandle(){// 点赞
				if(Object.keys(this.userInfo).length==0){
					uni.redirectTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.showLoading({
					title:"正在执行..."
				})
				if(this.type == 1){// 新闻动态
					news.giveThumbs({id:this.result.id}).then(res =>{
						uni.hideLoading()
						uni.showToast({
							title:"操作成功"
						})
					}).catch(err =>{
						uni.hideLoading()
					})
				}
				
			},
			shareHandle(item){
				if(Object.keys(this.userInfo).length==0){
					uni.redirectTo({
						url: '/pages/login/login'
					})
					return
				}
			},
		},
		onReady() {
			
		}
	}
</script>

<style lang="scss" scoped>
.bigView{
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
}
.bottomView{
	width: 100%;
	height: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.shareBtn{
	background-color: white;
	border: none;
	font-size: 14px;
}
.countDownView{
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: #FFFFFF;
	right: 5px;
	bottom: 60px;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12;
	box-shadow: 1px 1px #FFFFFF;
}

table, td, th {
  border-color: #ddd;
  border-width: 1px;
  border-style: solid;
}
</style>